import React, { useCallback, useEffect, useRef } from "react";
import { withState } from "../context";
import HighlightsDetail from "./HighlightsDetail";
import TodoListApp from "./TodoListApp";

const Highlights = (props) => {
    const ref = useRef(null);

    const { state } = props;
    const { name, widgetName } = state;
    const handleClick = () => {
        console.log("highlight clicked");
    }
    const handleRefClick = useCallback(() => {
        if (ref && ref.current && ref.current.handleClose) {
            ref.current.handleClose();
        }
    })
    useEffect(() => {
        console.log("highlights will update");
    })
    const handleHighlightsDetailClick = useCallback(() => {
        console.log("func passed to HighlightsDetail", state.items.length)
    }, [state.items.length]);
    return <div className="highlights">
        <div onClick={handleClick}>Highlights - {name} - {widgetName}</div>
        <div onClick={handleRefClick}>Ref click</div>
        <TodoListApp ref={ref} />
        <HighlightsDetail handleClick={handleHighlightsDetailClick} />
    </div>
}

export default withState(Highlights);